<template>
  <div class="wrapper">
    <count-to
      ref="num"
      :startVal="startVal"
      :endVal="endVal"
      :duration="4000"
      :decimals="2"
      separator=','
      prefix='¥ '
      suffix=' rmb'
      @mountedCallback="mountedCallback"
    ></count-to>
    <el-button @click="start1">开始</el-button>
    <el-button @click="pause1">停止</el-button>
    <el-button @click="reset1">重置</el-button>
  </div>
</template>

<script>
import CountTo from "vue-count-to";
export default {
  components: { CountTo },
  props: {},
  data() {
    return {
      startVal: 0,
      endVal: 2017,
    };
  },
  created() {},
  mounted() {
    // 参数                        type     默认值
    // startVal 开始值             number     0
    // endVal   结束值             number    2017
    // duration 持续的时间         number    3000
    // autoplay 自动播放           Boolean   true
    // decimals 要显示的小数位数    Number     0
    // decimal  十进制分割          String
    // separator 分隔符             String
    // prefix   前缀                String
    // suffix   后缀                String
    // useEasing   使用缓和功能      Boolean
    // easingFn    缓和回调         Function
    // 功能
    //  mountedCallback  挂载以后返回回调
    //  start  开始计数
    //  pause  暂停计数
    //  reset  重置countTo
  },
  activated() {},
  updated() {},
  methods: {
    mountedCallback(val) {
      console.log("1", 1);
    },
    start1() {
      this.$refs.num.start();
    },
    pause1() {
      this.$refs.num.pause();
    },
    reset1() {
      this.$refs.num.reset();
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped>
.wrapper {
  font-size: 30px;
  color: tomato;
  font-weight: 700;
}
</style>
